<template>
  <div>

    <!--加/减分-->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="visibleNum"
      :title="type==1?'加分说明':'减分说明'"
    >
      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="150px"
        :rules="rules"
      >
        <el-form-item :label="type==1?'加分分数:':'减分分数'" prop="pointNum">
          <el-input v-model="dataForm.pointNum" :placeholder="type==1?'请输入加分分数':'请输入减分分数'"></el-input>
        </el-form-item>
        <el-form-item :label="type==1?'加分理由:':'减分理由'" prop="actionReason">
          <el-input v-model="dataForm.actionReason" maxlength="16" :placeholder="type==1?'请输入加分理由（小于16个字）':'请输入减分理由（限制字数）'"></el-input>
        </el-form-item>
        <el-form-item :label="type==1?'加分描述:':'减分描述'" prop="actionDesc">
          <el-input v-model="dataForm.actionDesc" :placeholder="type==1?'请输入加分描述':'请输入减分描述'"  type="textarea" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="图片说明" prop="actionImages">
          <el-upload
            :action="url"
            list-type="picture-card"
            :before-upload="handlePictureCardPreview"
            :on-success="PictureCardPreview"
            :file-list="fileLists"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visibleNum = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    </el-dialog>

    <!--取消标签说明-->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="visibleCancel"
      title="取消标签说明"
    >
      <el-form
        :model="dataForm1"
        ref="dataForm1"
        label-width="150px"
        :rules="rules1"
      >
        <el-form-item label="取消标签理由:" prop="actionReason">
          <el-input v-model="dataForm1.actionReason" placeholder="请输入取消标签理由"></el-input>
        </el-form-item>
        <el-form-item label="取消标签描述:" prop="actionDesc">
          <el-input v-model="dataForm1.actionDesc" placeholder="请输入取消标签描述"  type="textarea" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="图片说明" prop="actionImages">
          <el-upload
            :action="url"
            list-type="picture-card"
            :before-upload="handlePictureCardPreview"
            :on-success="PictureCardPreview1"
            :file-list="fileLists1"
            :on-remove="handleRemove1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visibleCancel = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit1()">确定</el-button>
    </span>
    </el-dialog>

    <!--禁止兑换-->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="visibleForbid"
      title="禁止兑换说明"
    >
      <el-form
        :model="dataForm2"
        ref="dataForm2"
        label-width="150px"
        :rules="rules2"
      >
        <el-form-item label="请选择解禁时间:" prop="releaseTime">
          <el-date-picker
            v-model="dataForm2.releaseTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="禁止兑换理由:" prop="actionReason">
          <el-input v-model="dataForm2.actionReason" placeholder="请输入禁止兑换理由"></el-input>
        </el-form-item>
        <el-form-item label="禁止兑换描述:" prop="actionDesc">
          <el-input v-model="dataForm2.actionDesc" placeholder="请输入禁止兑换描述"  type="textarea" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="图片说明" prop="actionImages">
          <el-upload
            :action="url"
            list-type="picture-card"
            :before-upload="handlePictureCardPreview"
            :on-success="PictureCardPreview2"
            :file-list="fileLists2"
            :on-remove="handleRemove2"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visibleForbid = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit2()">确定</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        url: '',
        // 加/减分
        visibleNum: false,
        dataForm: {
          actionImages: [],
          actionDesc: ''
        },
        fileLists: [],
        rules: {
          pointNum: [
            { required: true, message: '请填写分数', trigger: 'blur' }
          ],
          actionReason: [
            { required: true, message: '请填写理由', trigger: 'blur' }
          ]
        },
        // 取消标签说明
        visibleCancel: false,
        dataForm1: {
          actionImages: [],
          actionDesc: ''
        },
        rules1: {
          actionReason: [
            { required: true, message: '请填写取消标签理由', trigger: 'blur' }
          ]
        },
        fileLists1: [],
        // 禁止兑换
        visibleForbid: false,
        dataForm2: {
          actionImages: [],
          releaseTime: '',
          actionDesc: ''
        },
        rules2: {
          actionReason: [
            { required: true, message: '请填写取消标签理由', trigger: 'blur' }
          ],
          releaseTime: [
            { required: true, message: '请选择解禁时间', trigger: 'blur' }
          ]
        },
        fileLists2: [],
        type: ''
      }
    },
    mounted() {
      this.url = this.$http.adornUrl(
        `/point/userRewardPoint/upload?token=${this.$cookie.get('token')}`
      )
    },
    methods: {
      initNum(id, type) {
        this.type = type
        this.dataForm = {}
        this.visibleNum = true
        this.dataForm.userId = id
        this.dataForm.actionType = type
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.fileLists = []
        })
      },
      initCancel(id) {
        this.dataForm1.userId = id
        this.visibleCancel = true
        this.$nextTick(() => {
          this.$refs['dataForm1'].resetFields()
          this.fileLists1 = []
        })
      },
      initForbid(id) {
        this.dataForm2.userId = id
        this.visibleForbid = true
        this.$nextTick(() => {
          this.$refs['dataForm2'].resetFields()
          this.fileLists2 = []
        })
      },
      handlePictureCardPreview: function (file) {
        const isJPG = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/gif'
        if (!isJPG) {
          this.$message.error('上传封面只能是图片!')
        }
        return isJPG
      },
      PictureCardPreview: function (response, file, fileList) {
        this.fileLists = fileList
      },
      handleRemove: function (file, fileList) {
        this.fileLists = fileList
      },
      PictureCardPreview1: function (response, file, fileList) {
        this.fileLists1 = fileList
      },
      handleRemove1: function (file, fileList) {
        this.fileLists1 = fileList
      },
      PictureCardPreview2: function (response, file, fileList) {
        this.fileLists2 = fileList
      },
      handleRemove2: function (file, fileList) {
        this.fileLists2 = fileList
      },
      // 加/减分表单提交
      dataFormSubmit() {
        this.dataForm.actionDesc = this.dataForm.actionDesc || ''
        this.dataForm.actionImages = []
        this.fileLists.map(item => {
          this.dataForm.actionImages.push(item.response.url)
        })
        this.$http({
          url: this.$http.adornUrl(
            `/point/userRewardPoint/plusOrMinus`
          ),
          method: 'post',
          data: this.$http.adornData(this.dataForm)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visibleNum = false
                this.$emit('refreshDataList')
              }
            });
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      // 取消标签表单提交
      dataFormSubmit1() {
        this.dataForm1.actionDesc = this.dataForm1.actionDesc || ''
        this.dataForm1.actionImages = []
        this.fileLists1.map(item => {
          this.dataForm1.actionImages.push(item.response.url)
        })
        this.$http({
          url: this.$http.adornUrl(
            `/point/userRewardPoint/cancelLabel`
          ),
          method: 'post',
          data: this.$http.adornData(this.dataForm1)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visibleCancel = false
                this.$emit('refreshDataList')
              }
            });
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      // 禁止兑换表单提交
      dataFormSubmit2() {
        this.dataForm2.actionDesc = this.dataForm2.actionDesc || ''
        this.dataForm2.actionImages = []
        this.fileLists2.map(item => {
          this.dataForm2.actionImages.push(item.response.url)
        })
        this.$http({
          url: this.$http.adornUrl(
            `/point/userRewardPoint/exchangeForbid`
          ),
          method: 'post',
          data: this.$http.adornData(this.dataForm2)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visibleForbid = false
                this.$emit('refreshDataList')
              }
            });
          } else {
            this.$message.error(data.msg)
          }
        })
      }
    }
  }
</script>
<style scoped>
  .noteContent{
    border: 1px solid #898989;
    border-radius: 6px;
    padding: 30px;
    height:400px;
    overflow-y: scroll;
  }
  .noteContent img{
    width: 100%!important;
    height: auto;
  }
</style>
